<template>
  <div class="home">
    <top-menu :data="data" style="height:30px !important" />
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>连退平整机工艺参数优化模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col class="top-left" :span="12">
          <span class="warn">
            <p
              style="position:absolute;width:300px;top:20px;left:80px;font-size:12px;"
            >平整AI模型报警:后卷过度异常</p>
            <img :src="imagePath(1)" style="position:absolute;top:10px;" />
          </span>
          <div class="svg" style="width:100%;">
            <svg-load :name="technologicalName" width="100%" style="padding-top:40px"></svg-load>
          </div>
          <div
            class="coiler_remaining_length_b semitransp_box"
            style="position:absolute;left: 12.1vw;top: 12vh;padding: 0 .5rem;display:flex"
          >
            <p>轧制力:</p>
            <p>{{ numberFormat1(zcoiler_remaining_length_b) }} KN</p>
          </div>
          <div
            class="coiler_remaining_length_b semitransp_box"
            style="position:absolute;left: 12.1vw;top: 15vh;padding: 0 .5rem;display:flex"
          >
            <p>窜辊:</p>
            <p>{{ ccoiler_remaining_length_b }}</p>
          </div>
          <div
            class="coiler_remaining_length_b semitransp_box"
            style="position:absolute;left: 12.1vw;top: 18vh;padding: 0 .5rem;display:flex"
          >
            <p>弯辊力:</p>
            <p>{{ numberFormat1(coiler_remaining_length_b) }} KN</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div style="height: 280px;width:650px;padding-top:30px">
            <nercar-echarts
              :graphic="echartsListOptions[0].graphic"
              :title="echartsListOptions[0].title"
              :grid="echartsListOptions[0].grid"
              :x-axis="echartsListOptions[0].xAxis"
              :y-axis="echartsListOptions[0].yAxis"
              :tooltip="echartsListOptions[0].tooltip"
              :series="echartsListOptions[0].series"
            />
          </div>
        </el-col>
      </el-row>
      <el-row class="middle">
        <el-col :span="8">
          <div style="height: 210px;width:410px;padding-left:10px;">
            <el-select
              v-model="value"
              popper-class="custom-select-dropdown"
              placeholder="请选择"
              style="height:0px;width:60px;"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="font-size:12px"
              />
            </el-select>
            <nercar-echarts
              :graphic="echartsListOptions[1].graphic"
              :title="echartsListOptions[1].title"
              :grid="echartsListOptions[1].grid"
              :x-axis="echartsListOptions[1].xAxis"
              :y-axis="echartsListOptions[1].yAxis"
              :tooltip="echartsListOptions[1].tooltip"
              :series="echartsListOptions[1].series"
              :legend="echartsListOptions[1].legend"
            />
          </div>
        </el-col>

        <el-col :span="8">
          <div style="height: 210px;">
            <nercar-echarts
              :graphic="echartsListOptions[2].graphic"
              :title="echartsListOptions[2].title"
              :grid="echartsListOptions[2].grid"
              :x-axis="echartsListOptions[2].xAxis"
              :y-axis="echartsListOptions[2].yAxis"
              :tooltip="echartsListOptions[2].tooltip"
              :series="echartsListOptions[2].series"
              :legend="echartsListOptions[2].legend"
            />
          </div>
        </el-col>

        <el-col :span="8">
          <div style="height: 225px;width:410px;padding-left:10px;">
            <nercar-echarts
              :graphic="echartsListOptions[3].graphic"
              :title="echartsListOptions[3].title"
              :grid="echartsListOptions[3].grid"
              :x-axis="echartsListOptions[3].xAxis"
              :y-axis="echartsListOptions[3].yAxis"
              :tooltip="echartsListOptions[3].tooltip"
              :series="echartsListOptions[3].series"
              :legend="echartsListOptions[3].legend"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <new-coil-card title="当前卷和下一卷信息">
            <el-table
              :data="pidMesInfo"
              ref="alarmTableRef"
              style="width: 98%;border:1px solid;height:200px;"
              :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none' }"
              :cell-style="{fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none'}"
              max-height="106px"
              class="custom-table"
              empty-text
              :row-class-name="tableRowClassName"
            >
              <template #empty>
                <div class="custom-no-data">
                  <img src="/@/assets/images/nodata.png" alt="No Data Background" />
                </div>
              </template>
              <el-table-column prop="coilSort" label="钢卷顺序" width="120"></el-table-column>

              <el-table-column prop="COIL_ID" label="卷号" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="钢种" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="钢种代码" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="厚度(mm)" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="宽度(mm)" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="屈服强调" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="合金化标记" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="表面等级" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="轧制力AI设定值" width="125"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="弯辊力AI设定值"></el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref } from "vue";
import { refreshSVG, initialSVG, refreshGraphical } from "/@/common/refreshSVG";
import NercarEcharts from "/@/components/NercarEcharts/NercarEcharts.vue";
import * as echarts from "echarts";
import NewCoilCard from "/@/components/NewCoilCard/NewCoilCard.vue";
import { rollingSimulationStore } from "/@/store/rollingsimulation/index";
import TopMenu from "/@/components/TopMenu/TopMenu.vue";

const value = ref("");
const zcoiler_remaining_length_b = ref<number>(8.0);
const ccoiler_remaining_length_b = ref<String>("DC51D");
const coiler_remaining_length_b = ref<number>(25.0);
const data = ref([
  { name: "连退平整机工艺参数列表", url: "/levelingmachine/list" }
]);

const options = [
  {
    value: "Option1",
    label: "轧制力"
  },
  {
    value: "Option2",
    label: "弯辊力"
  }
];

const technologicalName = "spm";
const imagePath = (rowIndex: number) => {
  const normal = "notice.png";
  if (rowIndex === 1) {
    return `/src/assets/images/${normal}`;
  }
};

const echartsListOptions = [
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "5%",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["A", "B", "C", "D", "E", "F", "G", "H"],
        splitLine: { show: false }
      }
    ],
    yAxis: {
      type: "value",
      name: "AI弯辊力补偿值",
      nameTextStyle: {
        fontSize: "10px",
        color: "#fff" // 设置 y 轴名称的颜色为红色
      },
      scale: true, //纵坐标自适应
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1,
          shadowColor: "rgba(93, 209, 250, 0.8)",
          shadowBlur: 10
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      left: "center",
      show: true,
      text: "实际设定温度曲线",
      textStyle: {
        color: "#fff",
        fontSize: "12px"
      }
    },
    legend: {
      //left: 'left', // 图例在左侧显示
      data: ["二级设定", "AI模型设定", "实际值"], // 图例数据项名称，应与series中的data项名称对应
      textStyle: {
        fontSize: "10px",
        color: "#fff"
      },
      top: "15px",
      left: "130px"
    },
    graphic: [
      {
        type: "text",
        bottom: 98, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["A", "B", "C", "D", "E", "F", "G", "H"],
        splitLine: { show: false }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "炉区",
        nameTextStyle: {
          fontSize: "10px",
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "二级设定",
        nameTextStyle: {
          fontSize: "18px",
          color: "red" // 设置 y 轴名称的颜色为红色
        },
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        name: "AI模型设定",
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        name: "实际值",
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      data: ["Profit", "Expenses", "Income"],
      textStyle: {
        fontSize: "10px",
        color: "#fff"
      }
    },
    grid: [
      {
        top: "10%",
        width: "80%",
        height: "40%",
        containLabel: false
      },
      // {
      //     top: '40%',
      //     width: '80%',
      //     height:'20%',

      // },
      {
        top: "50%",
        width: "80%",
        height: "40%",
        containLabel: false
      }
    ],
    xAxis: [
      {
        type: "category",
        position: "bottom",
        inverse: false,
        gridIndex: 0,
        axisLabel: {
          show: false // 这里设置不显示x轴名称
        },
        axisTick: {
          show: false // 这里设置为 false 即可去掉 x 轴的刻度线
        },
        splitLine: {
          show: false
        }
      },
      {
        type: "category",
        position: "top",
        inverse: false,
        gridIndex: 1,
        axisLabel: {
          show: false // 这里设置不显示x轴名称
        },
        axisTick: {
          show: false // 这里设置为 false 即可去掉 x 轴的刻度线
        },
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }

        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      {
        gridIndex: 1,
        position: "center",
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "Income",
        type: "bar",
        xAxisIndex: 0,
        yAxisIndex: 0,
        label: {
          show: true, // 显示数值
          position: "top" // 数值显示在顶部
        },
        data: [320, 302, 341, 374, 390, 450, 420]
      },
      {
        name: "Expenses",
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 1,
        label: {
          show: true, // 显示数值
          position: "bottom" //显示位置
        },
        data: [120, 132, 101, 134, 190, 230, 210]
      }
    ]
  },
  {
    legend: {
      data: ["目标值", "实际值"],
      textStyle: {
        fontSize: "10px",
        color: "#fff" // 设置图例文字颜色
      },
      top: "15px"
    },
    title: {
      left: "center",
      show: true,
      text: "",
      textStyle: {
        fontSize: "12px",
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "5%",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["A", "B", "C", "D", "E", "F", "G", "H"],
        splitLine: { show: false }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "延伸率",
        nameTextStyle: {
          fontSize: "10px",
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "目标值",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },

        symbolSize: 1,
        symbol: "circle"
      },
      {
        name: "实际值",
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["A", "B", "C", "D", "E", "F", "G", "H"],
        splitLine: { show: false }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "弯辊力/%",
        nameTextStyle: {
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      }
    ]
  }
];

const tableRowClassName = ({ row, rowIndex }) => {
  //rowIndex从0开始计算
  console.log(rowIndex);
  if (rowIndex % 2 != 0) {
    return "warning-row";
  }
  return "";
};

const pidMesInfo = ref(rollingSimulationStore);

const numberFormat1 = (number: any) => {
  return number == undefined ? "0" : Number(parseFloat(number).toFixed(0));
};
</script>
<style scoped lang="less">
.home {
  width: 100vw;
  background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

  .home-main {
    height: 100%;

    .top {
      width: 100%;
    }

    .middle {
      width: 100%;
      height: 212px;

      .svg {
        width: 100%;
        height: 100%;

        svg {
          margin-top: 4vh;
          width: 100%;
          height: 100%;
        }
      }
    }

    .footer {
      width: 100%;
      height: 240px;
    }
  }
}
.warn {
  color: #fff;
  height: 0;
  padding-left: 3vw;
}
::v-deep .el-table,
.el-table__expanded-cell {
  // margin-left: 5px !important;
  background-color: transparent !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table tbody {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  //border: none !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

.custom-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure the container takes full height */
}

::v-deep .el-table .warning-row {
  background: #223671 !important;
}

::v-deep .el-select .el-select__wrapper {
  position: absolute;
  min-height: 10px;
  height: 25px !important; /* 自定义高度 */
  background-color: #173d91;
  color: #fff;
  font-size: 12px;
  top: 55px;
  left: 45px;
  width: 80px;
  z-index: 999;
}

.coiler_remaining_length_b {
  position: absolute;
  left: 12vw;
  top: 12vh;
  text-align: center;
  width: 8vw;
  font-size: 10px;
}

.semitransp_box {
  border-radius: 4px;
  background: #063e90;
  width: fit-content;
  font-weight: 600;
  text-align: center;
  align-content: center;
  color: #fff;
  font-size: 8px;
}
</style>